﻿@model List<OLMS_MVC2.Models.OrderSummaryViewModel>

@{
    Layout = null;
}

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>订单汇总</title>
    <link href="~/Content/bootstrap.min.css" rel="stylesheet">
    <link href="~/Assets/css/main2.css" rel="stylesheet" />
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css" rel="stylesheet">
</head>
<body>

    <div>
        <div style="width: 90%; max-width: 2000px; height: 80px;border-radius:10px;
        padding: 5px;
        margin:20px auto; /* 水平居中 */
        background-image: url('../images/bg0.jpg');
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-position: center;
        display:flex;
        align-items:center;
        ">
            <a href="@Url.Action("MainPape", "Excel")" style="text-decoration: none;
             outline: none;
             color:white;
             font-size:xx-large;
             text-decoration: none;
             margin-left:10px;
           ">
                在线音乐商店
            </a>
            <a href="@Url.Action("MainPape","Excel")" class="btn btn-info" style="color:white;text-decoration:none;padding:5px;width:200px;margin-left:600px">返回</a>
            <a href="@Url.Action("ExportExcel","Excel")" class="btn btn-success" style="color:white;text-decoration:none;padding:5px;width:200px;margin:50px">
                <i class="bi bi-file-earmark-excel"></i> 导出Excel
            </a>
        </div>

        <div style="margin-left:8%">
            <div class="card shadow-sm" style="margin-top: 20px; width: 300px;">
                <div class="card-header bg-primary text-white py-3">
                    <h2 class="h5 mb-0"><i class="bi bi-table me-2"></i>订单汇总报表</h2>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table table-striped table-hover mb-0">
                            <thead class="table-light">
                                <tr>
                                    <th class="text-center">专辑ID</th>
                                    <th class="text-center">总销量</th>
                                    <th class="text-center">总金额</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach (var order in Model)
                                {
                                    <tr>
                                        <td class="text-center">@order.AlbumId</td>
                                        <td class="text-center">@order.TotalQuantity</td>
                                        <td class="text-center">@order.TotalRevenue.ToString("C")</td>
                                    </tr>
                                }
                            </tbody>
                            <tfoot class="table-secondary">
                                <tr>
                                    <td class="text-end fw-bold" colspan="2">总计：</td>
                                    <td class="text-center fw-bold">@Model.Sum(o => o.TotalRevenue).ToString("C")</td>
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                </div>
                <div class="card-footer text-muted small py-2">
                    更新于 @DateTime.Now.ToString("yyyy-MM-dd HH:mm")
                </div>
            </div>

            <div style="width:900px;float:right;position:absolute;right:100px;top:16.5%">
                <div class="card shadow-sm">
                    <div class="card-header bg-primary text-white py-3">
                        <h2 class="h5 mb-0"><i class="bi bi-bar-chart me-2"></i>销售数据图表</h2>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6">
                                <canvas id="revenueChart" height="300"></canvas>
                            </div>
                            <div class="col-md-6">
                                <canvas id="quantityChart" height="300"></canvas>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
        <script>
    document.addEventListener('DOMContentLoaded', function() {
        // 确保Model不为null
        @if(Model != null)
        {
            <text>
            // 准备图表数据
            var chartData = {
                albumIds: [@Html.Raw(string.Join(",", Model.Select(o => $"\"{o.AlbumId}\"")))],
                revenues: [@string.Join(",", Model.Select(o => o.TotalRevenue))],
                quantities: [@string.Join(",", Model.Select(o => o.TotalQuantity))]
            };

            console.log("图表数据:", chartData); // 调试用

            // 绘制收入图表
            if (document.getElementById('revenueChart')) {
                const revenueCtx = document.getElementById('revenueChart').getContext('2d');
                new Chart(revenueCtx, {
                    type: 'bar',
                    data: {
                        labels: chartData.albumIds,
                        datasets: [{
                            label: '总金额',
                            data: chartData.revenues,
                            backgroundColor: 'rgba(54, 162, 235, 0.7)',
                            borderColor: 'rgba(54, 162, 235, 1)',
                            borderWidth: 1
                        }]
                    },
                    options: {
                        responsive: true,
                        plugins: {
                            title: {
                                display: true,
                                text: '专辑收入排行'
                            },
                            tooltip: {
                                callbacks: {
                                    label: function(context) {
                                        return '¥' + context.raw.toFixed(2);
                                    }
                                }
                            }
                        },
                        scales: {
                            y: {
                                beginAtZero: true,
                                ticks: {
                                    callback: function(value) {
                                        return '¥' + value;
                                    }
                                }
                            }
                        }
                    }
                });
            }

            // 绘制销量图表
            if (document.getElementById('quantityChart')) {
                const quantityCtx = document.getElementById('quantityChart').getContext('2d');
                new Chart(quantityCtx, {
                    type: 'bar',
                    data: {
                        labels: chartData.albumIds,
                        datasets: [{
                            label: '总销量',
                            data: chartData.quantities,
                            backgroundColor: 'rgba(75, 192, 192, 0.7)',
                            borderColor: 'rgba(75, 192, 192, 1)',
                            borderWidth: 1
                        }]
                    },
                    options: {
                        responsive: true,
                        plugins: {
                            title: {
                                display: true,
                                text: '专辑销量排行'
                            }
                        },
                        scales: {
                            y: {
                                beginAtZero: true,
                                ticks: {
                                    precision: 0
                                }
                            }
                        }
                    }
                });
            }
            </text>
        }
        else {
            
        }
    });
        </script>

    </div>
    <script src="~/Scripts/bootstrap.bundle.min.js"></script>
</body>
</html>